<template>
	<div class="secGoodsDetail-warp">
		<div class="info" v-if="goodsInfo">
		    <router-link :to="{path:'/twoPerson',query:{id:goodsInfo.userId}}">
              <div class="avatar">
				<img :src="avatar" alt="">
			  </div>
			  <div class="d">
				<h4>{{goodsInfo.shopName}}</h4>
				<p>{{goodsInfo.createDateName}}</p>
			  </div>
			</router-link>
		</div>
		<card class="main">
			<div class="content" slot="content" v-if="detailImgs&&goodsInfo&&goodsInfo.discountPrice">
				<div class="price-wrap">
					<span class="shop-detail-price">￥{{goodsInfo.discountPrice}}</span>
					<span class="originPrice">￥{{goodsInfo.price}}</span>
				</div>
				<p class="content-text">{{goodsInfo.description}}</p>
				<img :src="pic" alt="" v-for="(pic,index) in detailImgs" :key="index">
			</div>
			<div class="footer" slot="footer">
				<div class="left">
					<img :src="require('../assets/images/sm.png')" alt=""> <span>实名认证已通过</span>
				</div>
				<div class="view" v-if="goodsInfo&&goodsInfo.browseCount">
					赞·{{zanCount}}&nbsp&nbsp&nbsp
					浏览·{{goodsInfo.browseCount}}
				</div>
			</div>
		</card>
		<div class="comment-wrap">
			<div class="title">
				留言·{{commentLength}}
			</div>
			<div class="comment-list">
				<comment class="comment" 
				v-for="(comment,index) in commentList" 
				:key="index" 
				:comment="comment">
					<comment 
					v-if="comment.repeat" 
					v-for="(repy,index) in comment.repeat" 
					:key="index"
					:comment="repy"
					>

					</comment>
				</comment>
			</div>
		</div>
		<div class="bottom">
			<div class="controls">
				<div :class="[isPraise ? 'active':'','item']" @click="handlePraise(isPraise)">
					<x-icon v-if="isPraise" class="heart" type="ios-heart" size="20"></x-icon>
					<x-icon v-if="!isPraise" class="heartOut" type="ios-heart-outline" size="20"></x-icon>
					<!-- <i class="fa fa-heart-o"></i> --> 点赞
				</div>
				<div class="item" @click="handleFirstMsg()">
					<i class="fa fa-commenting-o" ></i> 留言
				</div>
				<div :class="[isCollect ? 'active':'','item']" @click="handleCollect(isCollect)">
					<x-icon v-if="isCollect" class="heart" type="ios-star" size="20"></x-icon>
					<x-icon v-if="!isCollect" class="heartOut" type="ios-star-outline" size="20"></x-icon>
					<!-- <i class="fa fa-star-o"></i> --> 收藏
				</div>
			</div>
			<div class="pay">
				<span class="paytext" @click="goPay">立即购买</span>
			</div>
			<span class="connect" @click="gochat">联系卖家</span>
		</div>
	</div>
</template>
<script>
 import axios from '@/api/request'
import { Flexbox, FlexboxItem ,Card,Group,CellBox} from 'vux'
import comment from "../components/comment"
import bgMixin from "../mixins/bg";
import { mapState,mapGetters } from "vuex";
export default {
	name : 'shop-detail',
	components: {
    Flexbox,
		FlexboxItem,
		Card,Group,CellBox,
		comment,
	},
	mixins:[bgMixin],
	computed:{
		// commentLength(){
		// 	return this.commentList.length;
		// }
	},
	data(){
		return{
			isPraise: false,
			isCollect: false,
			goodsInfo: null,
			goodsDetail: null,
			// avatar:require('../assets/images/default-avatar.png'),
			avatar: null,
			price:15,
			content:`Dior极缎丝柔精华粉底液  30ml，3#色，象牙白。拆开没用过，低价出，有意者请私聊`,
			pics:[
				require('../assets/images/detail-test.png'),
				require('../assets/images/detail-test.png'),
			],
			commentLength: '',
			commentList:[],
			goodsId: '',
			goods: null,
			detailImgs: null,
			zanCount: null,
		}
	},
	computed:{
        // ...mapState({
        //   openId:state=>state.openId,
        //   userId:state=>state.userId,
        // }),
        ...mapGetters({
          openId: 'doneOpenId',
          userId: 'doneUserId',
          phone: 'donePhone',
          password: 'donePassword',
        }),
    },
	created(){
		let goodsId = this.$route.query.goodsId
		if(goodsId){
			this.goodsId = goodsId
		}
		this.checkIsCollect() 
		this.getGoodsInfo(goodsId)
		this.fetchMessageList(goodsId)
	},
	mounted(){

	},
	methods:{
		getGoodsInfo(id){   //获取商品信息
			var self=this 
			axios('/device/productSecond/getById','post',{id: id}).then(res=>{
                if(res.data.code==1000){
                    console.log(res)
                    this.goodsInfo = res.data.data.product
                    this.avatar = res.data.data.headImg
                    this.zanCount = res.data.data.wangCount
                    // this.detailImgs = res.data.data.detailImgs
                    this.detailImgs = JSON.parse(res.data.data.product.detailImgs)
                    // console.log(this.detailImgs)
                }
            })
        },
		fetchMessageList(id) {   //获取留言
			let data = {   //二手商品ID
				// proxyId : "111dc80bf64ae3adc027931ae5606811" 
				proxyId : id 
			}
			axios('/device/leaveMessage/allLeaveMessage','post',data).then(res=>{
                if(res.data.code==1000){
                	// console.log(444)
                	// console.log(res)
                    this.commentList = res.data.data.list
                    this.commentLength = res.data.data.number
                }
            })
		},
		checkIsCollect(){
            let data = {
                userId: this.userId,
                // type: 4,
                proxyId: this.goodsId,
            }
            axios('/device/collection/difference','post',data).then(res=>{
            	console.log(666)
            	console.log(res)
                if(res.data.code==1000){
                    console.log('查看是否点赞')
                    console.log(res)
                    if(res.data.data.secondThumbs==1){
                        this.isPraise = true
                    }else{
                        this.isPraise = false
                    }
                    if(res.data.data.secondProduct==1){
                        this.isCollect = true
                    }else{
                        this.isCollect = false
                    }
                }else if(res.data.code==1012){
                	this.isCollect = false
                	this.isPraise = false
                }
            })
        },
		handlePraise(isPraise){   //底部点赞
			let dis
			if(isPraise){
				dis = 1
			}else{
				dis = 0
			}
			let data = {
				dis : dis,		// 0: 收藏、点赞	1: 取消收藏、取消点赞
				userId : this.userId,
				type : 4,		// 5: 收藏二手商品，4: 点赞二手商品
				proxyId : this.goodsId	// productSecondId(二手商品id)
			}
			axios('/device/collection/inIf','post',data).then(res=>{
                if(res.data.code==1000){
                	// console.log(res)
                	this.zanCount = res.data.data
                    if(dis==1){
                    	this.isPraise = false
                    }else{
                    	this.isPraise = true
                    }
                }else if(res.data.code=1015){
                	this.$vux.toast.text('请不要重复点赞', 'middle')
                }
            })
		},
		handleFirstMsg(){   //底部留言
			let self = this;
		  	this.$vux.confirm.prompt('请输入留言', {
                inputAttrs: {
                    type: 'text'
                },
                title: '留言',
                onCancel (value) {
                    // console.log(value)
                },
                onConfirm (value) {
			    	console.log(self.userId)
			    	let data = {
			    		customerId : self.userId,	 // 用户自己的ID
						contentId : self.goodsInfo.userId,		// 回复对象id（该商品所属userId）
						proxyId : self.goodsId,		// 二手商品id
						type : 1, // 代表级别，1：一级评论，2：二级评论
						content : value,	// 留言内容
						state : 1,		// 1:公开展示，0:不公开展示
						source: 1,     //0是资讯  1是二手商品
			    	}
			    	console.log(data)
					axios('/device/leaveMessage/create','post',data).then(res=>{
		                if(res.data.code==1000){
		                    self.fetchMessageList(self.goodsId)	
		                    self.$vux.toast.text('留言成功！', 'middle')
		                    self.$vux.confirm.hide()
		                }
		            })
			    }
			})
		},
		handleCollect(isCollect){   //底部收藏
			let dis
			if(isCollect){
				dis = 1
			}else{
				dis = 0
			}
			let data = {
				dis : dis,		// 0: 收藏、点赞	1: 取消收藏、取消点赞
				userId : this.userId,
				type : 5,		// 5: 收藏二手商品，4: 点赞二手商品
				proxyId : this.goodsId	// productSecondId(二手商品id)
			}
			axios('/device/collection/inIf','post',data).then(res=>{
                if(res.data.code==1000){
                    if(dis==1){
                    	this.isCollect = false
                    }else{
                    	this.isCollect = true
                    }
                }
            })
		},
		goPay() {   //立即购买
		 	this.$router.push({path:'/secFillOrder',query:{goodsId: this.goodsInfo.id}})
		},
		gochat(){   //客服聊天
			// this.IMlogin()
			this.$router.push({path:'/chat',query:{secGoodsId: this.goodsInfo.id,fromGoods: true}})
		},
		IMlogin() {
            let self = this;
            console.log(123)
            var options = {
                    apiUrl: this.$WebIM.config.apiURL,
                    // user: this.phone,
                    user: "15594818160",
                    // pwd: this.password,
                    pwd: "123456",
                    appKey: this.$WebIM.config.appkey,
                    success: function (token) {
                        console.log('登录成功'+token)
                        // var token = token.access_token;
                        // this.$WebIM.utils.setCookie('webim_' + encryptUsername, token, 1);
                        // self.$imConn.setPresence();//设置在线状态
                        // self.getHaoYouList()
                    },
                    error: function(){
                    }
                };
            this.$imConn.open(options);
        },
	    str2Obj(str){
	    	let a = JSON.parse(str)
	    	return a
	    }
	}
}
</script>
<style lang="less" scoped>
// @import "../assets/less/secGoodsDetail.less";
.secGoodsDetail-warp{
	padding-bottom: 1.733333rem /* 130/75 */ /* 120/75 */;
	overflow-x: hidden;
	.info{
		position: relative;
		display: flex;
		background: #fff;
		// width: 100%;
		align-items: center;
		padding-left: .386667rem /* 29/75 */;
		padding-top: .493333rem /* 37/75 */;
		padding-bottom: .466667rem /* 35/75 */;
		a{
			display: flex;
		}
		&::before{
			content: '';
			position: absolute;
			bottom: 0;
			background: #dcdcdc;
			height: 1px;
			width: 100%;
			left: .386667rem /* 29/75 */;
		}
		.avatar{
			width: 1.146667rem /* 86/75 */;
			height: 1.146667rem /* 86/75 */;
			border-radius: 100%;
			overflow: hidden;
			img{
				width: 100%;
			}
			
		}
		.d{
			margin-left: .266667rem /* 20/75 */;
			h4{
				font-size: .4rem /* 30/75 */;
				color: #333333;
			}
			p{
				font-size: .32rem /* 24/75 */;
				color: #999999;
			}
		}
	}

	.main{
		width: 100%;
		margin: 0;
		margin-bottom: .32rem /* 24/75 */;
		&::before{
			border: none;
		}
		.content{
			padding-left: .293333rem /* 22/75 */;
			padding-right: .293333rem /* 22/75 */;
			
			.price-wrap{
				padding-left: .24rem /* 18/75 */;
				padding-top: .64rem /* 48/75 */;
				line-height: 1;
				.shop-detail-price{
					font-size: .64rem /* 48/75 */;
					color: #ff4444;
					margin-right: .306667rem /* 23/75 */;
				}
				.originPrice{
					font-size: .32rem /* 24/75 */;
					text-decoration: line-through;
					color: #999999;
				}
			}
			.content-text{
				font-size: .426667rem /* 32/75 */;
				color: #333333;
				margin-top: .413333rem /* 31/75 */;
				margin-bottom: .32rem /* 24/75 */;
				line-height:.746667rem /* 56/75 */;
			}
			img{
				width: 100%;
				vertical-align: middle;
				margin-bottom: .213333rem /* 16/75 */;
			}
		}
		.footer{
			height: 1.16rem /* 87/75 */;
			align-items: center;
			padding-left: .4rem /* 30/75 */;
			padding-right: .413333rem /* 31/75 */;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			border-top: .013333rem /* 1/75 */ solid #dcdcdc;
			
			.left{
				font-size: .346667rem /* 26/75 */;
				color: #4a73fd;
				line-height: .426667rem /* 32/75 */;
				display: flex;
				align-items: center;
				img{
					width: .426667rem /* 32/75 */;
					vertical-align: middle;
					margin-right: .28rem /* 21/75 */;
				}
			}
			.view{
				font-size: .32rem /* 24/75 */;
				color: #999999;
			}
		}
	}
	.comment-wrap{
		background: #fff;
		.title{
			height: 1.173333rem /* 88/75 */;
			display: flex;
			align-items: center;
			padding-left: .426667rem /* 32/75 */;
			border-bottom: 1px solid #dcdcdc;
			color: #333333;
			font-size: .4rem /* 30/75 */;
			font-weight: bold;
		}
	
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		display: flex;
		height: 1.333333rem /* 100/75 */;
		justify-content: space-between;
		align-items: center;
		padding-left: .493333rem /* 37/75 */;
		padding-right: .186667rem /* 14/75 */;
		box-shadow: 0 -3px 5px rgba(0, 0, 0, .2);
		.controls{
			display: flex;
			width: 50%;
			justify-content: space-between;
			.item{
				display: flex;
				align-items: center;
				font-size: .32rem /* 24/75 */;
				color: #444444;
				i{
					font-size: 1.3em;
					color: #666;
				}
			}
			.active{
				font-size: .32rem /* 24/75 */;
				color: #ff4444;
				i{
					font-size: 1.3em;
					color: #ff4444;
				}
			}
			.heart{
				display: block;
  				fill: #ff4444;
				//color: #ff4444;
			}
		}
		.connect,.pay{
			width: 2.08rem /* 156/75 */;
			height: .76rem /* 57/75 */;
			color: #fff;
			text-align: center;
			line-height: .76rem /* 57/75 */;
			background-color: #ff4444;
		}
	}
}
</style>


